import React, { PureComponent } from 'react';
// 引入找回密码的样式
import './scss/forget.scss';
// 引入框架
import { Input, Button, message } from 'antd';
// 引入axios
import Axios from 'axios';
// 引入地址
import { webSite } from '../website.js';
export default class Login extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 邮箱
      emailInput: '',
      // 验证码
      code: '',
      // 验证码文字
      codeText: '获取验证码',
      // 是否显示验证码内容
      isCode: false,
      // 是否显示验证码下方提示
      isCodeText: false,
      // 验证码是否正确
      codeTrue: false,
      // 账号
      userInput: '',
      // 账号是否存在的验证
      userInputTrue: false,
      // 密码
      passwordInput: ''
    }
  }
  // 清除订阅者
  componentWillUnmount () {
    // 卸载异步操作设置状态
    this.setState = () => {
      return;
    }
  }
  // input的输入事件
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }

  handleCode = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
    if (value.length === 5) {
      // 发送验证码
      Axios.create({
        baseURL: `${webSite}:3003`
      }).post("/ForgetCode", { isCode: value }).then(err => {
        if (err.data.code === 'B0004') {
          // 验证码不正确
          this.setState({
            isCodeText: true,
            codeTrue: false
          })
        } else if (err.data.code === 'C0001') {
          // 验证码正确
          this.setState({
            isCodeText: false,
            codeTrue: true
          })
        }
      })
    }
  }
  // 获取验证码
  getCode = () => {
    let { emailInput } = this.state;
    if (!emailInput) {
      message.error({ content: '请先输入邮箱', className: 'bulletChatMessage' });
      return;
    }
    //判断是否是邮箱
    let test = /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.(?:com|cn)$/;
    if (emailInput.search(test)) {
      message.error({ content: '请输入正确的邮箱格式', className: 'bulletChatMessage' });
      return;
    }
    // 发送邮箱验证码
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/setforget", { emailInput: emailInput }).then(err => {
      if (err.data.code === 'A0000') {
        // 邮箱未注册跳转到注册页
        message.error({ content: '邮箱未注册', className: 'bulletChatMessage' });
        this.props.history.replace('/RegBtn');
      } else if (err.data.code === 'B0001') {
        // 邮箱注册了就发送找回密码的验证
        message.error({ content: '验证码发送成功', className: 'bulletChatMessage' });
        // 把获取验证码按钮变成60秒后重新获取
        this.setState({
          isCode: true
        })
        // 设置一个重新获取的时间
        let timeInt = 61
        let time = setInterval(() => {
          // 当时间为0时清除清定时器
          if (timeInt <= 0) {
            clearInterval(time);
            // 把按钮转成
            this.setState({
              isCode: false
            })
          } else {
            // 1s - 1 赋值到页面上
            timeInt = timeInt - 1;
            this.setState({
              codeText: `${timeInt}s后重新获取`
            })
          }
        }, 1000)
      }
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }

  // 判断账号是否存在
  BlurUser = () => {
    let { userInput } = this.state;
    if (userInput) {
      Axios.create({
        baseURL: `${webSite}:3003`
      }).post("/queryUser", { userInput: userInput }).then(err => {
        if (err.data.code === 'Q0001') {
          // 没有账号
          this.setState({
            userInputTrue: true
          })
        } else if (err.data.code === 'Q0002') {
          // 账号已存在
          this.setState({
            userInputTrue: false
          }, () => {
            message.error({ content: '账号已存在，请设置一个新账号', className: 'bulletChatMessage' });
          })
        }
      })
    }
  }

  // 找回密码
  forgetFrom = () => {
    let { userInput, passwordInput, emailInput, codeTrue, userInputTrue } = this.state;
    // 邮箱不为空
    if (!emailInput) {
      message.error({ content: '您还没有填写邮箱', className: 'bulletChatMessage' });
      return;
    }
    // 邮箱格式是否正确
    let test = /^([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+\.(?:com|cn)$/;
    if (emailInput.search(test)) {
      message.error({ content: '请输入正确的邮箱格式', className: 'bulletChatMessage' });
      return;
    }
    // // 验证码是否正确
    if (!codeTrue) {
      message.error({ content: '请先获取验证码或您的验证码不正确', className: 'bulletChatMessage' });
      return;
    }
    // 新账号不为空
    if (!userInput) {
      message.error({ content: '请填入新账号', className: 'bulletChatMessage' });
      return;
    }
    // 账号不能过长或低于6位
    if (userInput.length < 6) {
      message.error({ content: '账号不能少于6位', className: 'bulletChatMessage' });
      return;
    }
    // 账号不存在才能更改新账号
    if (!userInputTrue) {
      message.error({ content: '账号已存在，请设置一个新账号', className: 'bulletChatMessage' });
      return;
    }
    // 新密码不能是空
    if (!passwordInput) {
      message.error({ content: '请填入新密码', className: 'bulletChatMessage' });
      return;
    }
    // 密码不能过长或低于6位
    if (passwordInput.length < 6) {
      message.error({ content: '密码不能少于6位', className: 'bulletChatMessage' });
      return;
    }
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/ResetPassword", { emailInput: emailInput, userInput: userInput, passwordInput: passwordInput }).then(err => {
      if (err.data.code === 'R0001') {
        message.success({ content: '账号密码重置成功', className: 'bulletChatMessage' });
        // 账号密码重置成功返回登录页
        this.props.history.replace('/login');
      }
    }).catch(() => {
      message.error({ content: '网络错误,暂时无法充值', className: 'bulletChatMessage' });
    })
  }
  render () {
    let { emailInput, code, codeText, isCode, isCodeText, userInput, passwordInput } = this.state;
    return (
      <div className='forget'>
        <div className='forget_title'>
          <img src={require('../login/img/logo.jpg')} alt="注册" />
          <div className='forget_title_body'>
            <h3>找回密码</h3>
            <span>春风十里扬州路</span>
          </div>
        </div>
        <div className='forget_body'>
          {/* 邮箱 */}
          <Input placeholder="输入您绑定的邮箱" className='forget_input' value={emailInput} name='emailInput' onChange={this.handleInput} autoComplete="off" maxLength='20' />
          <div className='forget_body_code'>
            {/* 验证码 */}
            <Input placeholder="验证码" className='code_input' value={code} name='code' onChange={this.handleCode} autoComplete="off" maxLength='5' />
            {
              isCode ?
                <Button type='text' className='forgetBtn'>{codeText}</Button>
                :
                <Button onClick={this.getCode} type='text' className='forgetBtn'>获取验证码</Button>
            }
          </div>
          <span className='forget_body_codeSpan' style={{ display: isCodeText ? 'block' : 'none' }}>验证码不正确</span>
        </div>
        {/* 新的账号和密码 */}
        <div className='forget_password_body'>
          {/* 账号 */}
          <Input placeholder="输入新账号" className='forget_input' value={userInput} name='userInput' onChange={this.handleInput} autoComplete="off" maxLength='20' onBlur={this.BlurUser} />
          {/* 密码 */}
          <Input placeholder="输入新密码" className='forget_input' value={passwordInput} name='passwordInput' onChange={this.handleInput} autoComplete="off" maxLength='20' />
          {/* 找回密码 */}
          <Button className='forget_password_body_btn' type='text' onClick={this.forgetFrom}>找回密码</Button>
        </div>
      </div>
    )
  }
}